<template>
  <div>
    <!-- <div>
      <input type="text" v-model="word">
      <button @click="add">添加</button>
    </div>
    <h1>未完成</h1>
    <ul>
      <li v-for="(item, index) in arr" :key="index" v-show='!item.flag'>
        <input type="checkbox"  v-model="item.flag">
        <span>
           <span v-show="!item.isEdit" @dblclick="edit(index)">{{ item.title }}</span>
           <input type="text" v-show="item.isEdit" v-model="text" @keyup.enter="update(index)">
        </span>
       
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <h1>已完成</h1>
    <ul>
      <li v-for="(item, index) in arr" :key="index" v-show="item.flag">
        <input type="checkbox" v-model="item.flag">
        <span>{{ item.title }}</span>
        <button @click="del(index)">删除</button>
      </li>
    </ul> -->

    <router-view></router-view>
  </div>
</template>

<script lang="ts">
// import { ref, reactive } from 'vue'
// interface objType {
//   title: string,
//   flag: boolean,
//   isEdit: boolean
// }
// export default {
//   setup(options) {
//     let word= ref('')
//     let arr = reactive<objType[]>([])
//     let add = () => {
//       let obj: objType = { title: word.value, flag: false, isEdit: false }
//       arr.push(obj)
//       word.value = ''
//     }
//     let del = (key:number)=>{
//       arr.splice(key,1)
//     }
//     let text = ref('')
//     let edit = (index:number)=>{
//       arr[index].isEdit = !arr[index].isEdit
//       text.value=arr[index].title
//     }
//     let update = (index:number)=>{
//       arr[index].isEdit = !arr[index].isEdit
//       arr[index].title = text.value
//     }
    


//     return {
//       word,
//       arr,
//       del,
//       add,
//       edit,
//       text,
//       update
//     }
//   }
// }
</script>
